<style lang="scss" scoped>
.common_page_template {
  background: #fff;
  padding: 20px 0;
  box-sizing: border-box;
  height: 100%;
  .common_title {
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(240, 240, 240);
  }
  .common_page_wrap {
    padding: 6px 20px 20px;
    .btns_wrap {
      padding: 10px 100px;
    }
    .table_wrap {
      padding: 10px 0 0;
    }
  }
}
</style>

<template>
  <div class="common_page_template">
    <div class="common_title" v-if="showHeader">
      <common-title v-bind="titleData" />
    </div>
    <div class="common_page_wrap">
      <div class="search_wrap" v-if="hasSearch">
        <slot name="search"></slot>
      </div>
      <div class="btns_wrap" v-if="hasBtns">
        <slot name="btns"></slot>
      </div>
      <div class="table_wrap" v-if="hasTable">
        <common-table v-bind="attrs" stripe/>
      </div>
      <slot/>
    </div>
  </div>
</template>
<script>
  export default {
    inheritAttrs: false,
  };
</script>
<script setup>
import CommonTable from '@/components/commonTable/index.vue'
import { computed, useAttrs } from 'vue'
import { useRoute } from 'vue-router'
const attrs = useAttrs()
/** 页面头部逻辑 start */
import CommonTitle from './commonTitle.vue'
const route = useRoute()
// 从路由配置信息里面取
const titleData = computed(() => {
  return route.meta
})
/** 页面头部逻辑 end */

const props = defineProps({
  showHeader: {
    type: Boolean,
    default: true
  },
  // 是否有搜索条件
  hasSearch: {
    type: Boolean,
    default: true
  },
  // 是否有操作按钮
  hasBtns: {
    type: Boolean,
    default: true
  },
  // 是否有表格
  hasTable: {
    type: Boolean,
    default: Boolean
  }
})
</script>